<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>主页</title>
<link href="../bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet">
<link href="../bootstrap-3.3.7-dist/css/bootstrap.min.css"
  rel="stylesheet">
<link href="../bootstrap-3.3.7-dist/css/bootstrap-theme.css"
  rel="stylesheet">
<link href="../bootstrap-3.3.7-dist/css/bootstrap-theme.min.css"
  rel="stylesheet">
<link href="../font-awesome-4.7.0/css/font-awesome.min.css"
  rel="stylesheet">
<link href="../font-awesome-4.7.0/css/font-awesome.css" rel="stylesheet">
</head>
<body>
  <div class="container-fluid">
    <div class="row">
      <!-- 功能 -->
      <div class="col-md-3">
        <div class="btn-group-vertical btn-gp" role="group">
          <button class="btn btn-info zeroToHundred">0~100整数四则运算</button>
          <button class="btn btn-info withBracket">0~100带括号整数四则运算</button>
          <button class="btn btn-info mixedNumberCompute">带分数运算（没写）</button>
        </div>
      </div>
      <!-- /功能 -->

      <!-- 主页 -->
      <div class="col-md-9">
        <div class="compute-panel">
          <div class="panel panel-default main">请选择功能</div>
        </div>
      </div>
      <!-- /主页 -->
    </div>
  </div>
  <script src="../js/jquery/jquery.min.js"></script>
  <script src="../bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
  <script type="text/javascript">
	$(function() {
		doSwitchPanel(".zeroToHundred","zeroToHundred");
		doSwitchPanel(".withBracket","withBracket");
		doSwitchPanel(".mixedNumberCompute","mixedNumberCompute");
	})

	function doSwitchPanel(element,page){
		$(element).click(function(){
  			$(".main").remove();
  			$(".compute-panel").load(page);
		});
	}
</script>
</body>
</html>